<template>
    <div>
        <el-row>
            <el-col :xs="{span: 24}" :sm="{span: 4}">
                <el-input size="small" v-model="jobId" placeholder="请输入职位ID">
                    <template slot="prepend">职位ID：</template>
                </el-input>
            </el-col>
            <el-col :xs="{span: 24}" :sm="{span: 4}">
                <el-input size="small" v-model="jobName" placeholder="请输入职位名称">
                    <template slot="prepend">职位名称：</template>
                </el-input>
            </el-col>
            <el-col  :xs="{span: 24}" :sm="{span: 3}">
                <el-select size="small" v-model="jobDepartment" placeholder="请选择所属部门">
                    <el-option value="" >
                        全部
                    </el-option>
                    <el-option
                    v-for="item in newsAllDepartment"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    <template slot="prepend">所属部门：</template>
                    </el-option>
                </el-select>
            </el-col>
            <el-button size="small" type="primary" @click="secrchJob()" icon="el-icon-search">搜索</el-button>
            <router-link to="/manage/editjob">
                <el-button size="small" type="success" icon="el-icon-edit">新增</el-button>
            </router-link>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="delGroup">删除</el-button>
        </el-row>
        <el-table :data="tableData5" ref="multipleTable"  @selection-change="selsChange" @row-click="handleRowChange" style="width: 100%;margin-top:20px;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                   `     <el-form-item label="职位名称">
                            <span>{{ props.row.job_name }}</span>
                        </el-form-item>
                        <el-form-item label="所属部门">
                            <span>{{ props.row.name }}</span>
                        </el-form-item>
                        <el-form-item label="工作地点">
                            <span>{{ props.row.job_address }}</span>
                        </el-form-item>
                        <el-form-item label="薪资">
                            <span>{{ props.row.job_salary }}</span>
                        </el-form-item>
                        <el-form-item label="岗位职责">
                            <span v-html="props.row.job_duty"></span>
                        </el-form-item>
                        <el-form-item label="任职要求">
                            <span v-html="props.row.job_require"></span>
                        </el-form-item>
                        `
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="职位ID" prop="job_id">
            </el-table-column>
            <el-table-column label="职位名称" prop="job_name">
            </el-table-column>
            <el-table-column label="所属部门" prop="name">
            </el-table-column>
            <el-table-column label="创建时间" prop="create_date">
            </el-table-column>
            <el-table-column
                label="操作"
                width="200"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row>
            <el-pagination
                :page-size="10"
                background
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
import 	Menu 		from "@/service/menu-service.js"
const 	_menu 	    = new Menu();
import 	Job 		from "@/service/job-service.js"
const 	_job 	    = new Job();
export default {
    name:'job',
    data(){
        return{
            newsAllDepartment:[],
            jobId:'',
            jobName:'',
            jobDepartment:'',
            tableData5:[],
            currentPage:0,
            total:0
        }
    },
    created(){
        this.findDepartment();
        this.findSomeJob();
    },
    methods:{
        // 这个是查找所有部门
        findDepartment(){
            _menu.menuList({pId:"8"}).then((res)=>{
               this.newsAllDepartment = res.data;
           },(err)=>{
                this.$message.error(err);
           })
        },
        // 这是查找工作
        secrchJob(){
            this.findSomeJob();
        },
        //这里是点击分页查询
        handleCurrentChange(val){
            this.currentPage = val-1
            this.findSomeJob();
        },
        //这个是查找职位数据
        findSomeJob(){
            const loading = this.$loading({
                lock: true,
                text: '加载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            _job.findSomeJob({"jobId":this.jobId,"jobName":this.jobName,"jobDepartment":this.jobDepartment,"pageSize":"10","currentPage":this.currentPage,}).then((res)=>{
                this.tableData5 = res.data;
                if(res.count <= 10){
                    this.total = 10;
                }else{
                    this.total = res.count;
                }
                // 这里是判断数据是不空
                if(res.data.length == 0 && this.currentPage != 0){
                    this.currentPage--
                    this.secrchNews();
                }
                loading.close();
            },(err)=>{
                 this.$message.error(err);
            })
        },
        handleDelete(index,row){
            this.$confirm('您确定删除这个职位, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 这里调用删除接口进行删除数据
                _job.deleteJob({"ids":row.job_id}).then((res)=>{
                    this.findSomeJob();
                },(err)=>{
                     this.$message.error(err);
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        handleEdit(index,row){
            console.log(row)
            this.$router.push({path:'/manage/editJob/'+row.job_id});
        },
        // 获取多选参数
        handleRowChange(row, event, column) {
            this.$refs.multipleTable.toggleRowSelection(row)
        },
        //获取所有选中行的id组成的字符串，以逗号分隔
        delGroup() {
            this.$confirm('您确定删除选中的新闻, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var ids = this.sels.map(item => item.job_id).join();
                // 这里调用删除接口进行删除数据
                _job.deleteJob({"ids":ids}).then((res)=>{
                    this.findSomeJob();
                },(err)=>{
                    this.$message.error(err);
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 当行数改变的时候修改参数的值
        selsChange(sels) {
            this.sels = sels;
        },
    }   
}
</script>
<style>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.el-form--inline .el-form-item__label{
    float: left;
}
.el-pagination{
    text-align: center;
    margin-top: 20px;
}
</style>
